<!--
 * @Author: 码上talk|RC
 * @Date: 2020-09-29 16:03:57
 * @LastEditTime: 2020-09-30 14:39:58
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /tacomall-merchant/src/pages/goods/update.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
    <div class="goods-update">
        <div class="gu-step">
            <i-steps :current="step" style="width: 60%">
                <i-step title="进行中" content="基础信息"></i-step>
                <i-step title="待进行" content="商品规格"></i-step>
                <i-step title="待进行" content="图文详情"></i-step>
                <i-step title="待进行" content="添加成功"></i-step>
            </i-steps>
        </div>
        <div class="gu-form">
            <div class="gf-common gf-base" v-if="step === 0">
                <div class="gc-input">
                    <i-form :model="formItem" :label-width="80">
                        <i-form-item label="i-input">
                            <i-input
                                v-model="formItem.input"
                                placeholder="Enter something..."
                            ></i-input>
                        </i-form-item>
                        <i-form-item label="i-select">
                            <i-select v-model="formItem.select">
                                <i-option value="beijing">New York</i-option>
                                <i-option value="shanghai">London</i-option>
                                <i-option value="shenzhen">Sydney</i-option>
                            </i-select>
                        </i-form-item>
                        <i-form-item label="i-date-picker">
                            <i-row>
                                <i-col span="11">
                                    <i-date-picker
                                        type="date"
                                        placeholder="i-select date"
                                        v-model="formItem.date"
                                    ></i-date-picker>
                                </i-col>
                                <i-col span="2" style="text-align: center"
                                    >-
                                </i-col>
                                <i-col span="11">
                                    <i-time-picker
                                        type="time"
                                        placeholder="i-select time"
                                        v-model="formItem.time"
                                    ></i-time-picker>
                                </i-col>
                            </i-row>
                        </i-form-item>
                        <i-form-item label="i-radio">
                            <i-radio-group v-model="formItem.radio">
                                <i-radio label="male">Male</i-radio>
                                <i-radio label="female">Female</i-radio>
                            </i-radio-group>
                        </i-form-item>
                        <i-form-item label="i-checkbox">
                            <i-checkbox-group v-model="formItem.checkbox">
                                <i-checkbox label="Eat"></i-checkbox>
                                <i-checkbox label="Sleep"></i-checkbox>
                                <i-checkbox label="Run"></i-checkbox>
                                <i-checkbox label="Movie"></i-checkbox>
                            </i-checkbox-group>
                        </i-form-item>
                        <i-form-item label="Switch">
                            <i-switch v-model="formItem.switch" size="large">
                                <span slot="open">On</span>
                                <span slot="close">Off</span>
                            </i-switch>
                        </i-form-item>
                        <i-form-item label="i-slider">
                            <i-slider
                                v-model="formItem.slider"
                                range
                            ></i-slider>
                        </i-form-item>
                        <i-form-item label="Text">
                            <i-input
                                v-model="formItem.textarea"
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 5 }"
                                placeholder="Enter something..."
                            ></i-input>
                        </i-form-item>
                    </i-form>
                </div>
                <div class="gc-submit">
                    <i-button type="primary" @click.native="step = step + 1"
                        >下一步
                    </i-button>
                </div>
            </div>
            <div class="gf-common gf-spec" v-else-if="step === 1">
                <div class="gc-input">
                    <i-table border :columns="columns12" :data="data6">
                        <template slot-scope="{ row }" slot="name">
                            <strong>{{ row.name }}</strong>
                        </template>
                        <template slot-scope="{ index }" slot="action">
                            <i-button
                                type="primary"
                                size="small"
                                style="margin-right: 5px"
                                @click="show(index)"
                                >View
                            </i-button>
                            <i-button
                                type="error"
                                size="small"
                                @click="remove(index)"
                                >Delete
                            </i-button>
                        </template>
                    </i-table>
                </div>
                <div class="gc-submit">
                    <i-button @click.native="step = step - 1">上一步</i-button>
                    <i-button
                        type="primary"
                        style="margin-left: 8px"
                        @click.native="step = step + 1"
                        >下一步
                    </i-button>
                </div>
            </div>
            <div class="gf-common gf-img" v-else-if="step === 2">
                <div class="gc-input">
                    <quill-editor
                        ref="gfImg"
                        v-model="content"
                        :options="editorOption"
                    ></quill-editor>
                </div>
                <div class="gc-submit">
                    <i-button @click.native="step = step - 1">上一步</i-button>
                    <i-button
                        type="primary"
                        style="margin-left: 8px"
                        @click.native="step = step + 1"
                        >下一步
                    </i-button>
                </div>
            </div>
            <div class="gf-common gf-success" v-else-if="step === 3">
                <div class="gs-icon">
                    <i class="iconfont icon-chenggong"></i>
                </div>
                <div class="gs-text">
                    <span>添加商品成功</span>
                </div>
                <div class="gs-description">
                    <p>
                        提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，使用
                        Message
                        全局提示反馈即可。灰色区域可以显示一些补充的信息。
                    </p>
                </div>
                <div class="gs-link">
                    <i-button
                        type="primary"
                        style="margin-left: 8px"
                        @click.native="go('/goods/info?id=1093')"
                        >查看商品
                    </i-button>
                    <i-button style="margin-left: 8px">返回列表</i-button>
                </div>
            </div>
        </div>
        <div class="gu-notice">
            <div class="gn-common gn-base" v-if="step === 0">
                <div class="gc-title">
                    <span>说明</span>
                </div>
                <div class="gc-content">
                    <div class="gc-item">
                        <div class="gi-label">
                            <span>注意信息</span>
                        </div>
                        <div class="gi-text">
                            <p>
                                如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明
                            </p>
                        </div>
                    </div>
                    <div class="gc-item">
                        <div class="gi-label">
                            <span>注意信息</span>
                        </div>
                        <div class="gi-text">
                            <p>
                                如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
export default {
    components: {
        quillEditor
    },
    data() {
        return {
            step: 0,
            formItem: {
                input: '',
                select: '',
                radio: 'male',
                checkbox: [],
                switch: true,
                date: '',
                time: '',
                slider: [20, 50],
                textarea: ''
            },
            columns12: [
                {
                    title: 'Name',
                    slot: 'name'
                },
                {
                    title: 'Age',
                    key: 'age'
                },
                {
                    title: 'Address',
                    key: 'address'
                },
                {
                    title: 'Action',
                    slot: 'action',
                    width: 150,
                    align: 'center'
                }
            ],
            data6: [
                {
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park'
                },
                {
                    name: 'Jim Green',
                    age: 24,
                    address: 'London No. 1 Lake Park'
                },
                {
                    name: 'Joe Black',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park'
                },
                {
                    name: 'Jon Snow',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park'
                }
            ],
            content: '',
            editorOption: {
                placeholder: '编辑文章内容'
            }
        }
    },
    methods: {
        show(index) {
            this.$Modal.info({
                title: 'User Info',
                content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
            })
        },
        remove(index) {
            this.data6.splice(index, 1);
        },
        onEditorChange({ html }) {
            this.content = html;
        }
    }
}
</script>

<style lang="less">
.goods-update {
    padding: 10px;
    background: white;
    .gu-step {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100px;
    }
    .gu-form {
        display: flex;
        justify-content: center;
        padding: 20px 0 40px 0;
        .gf-common {
            width: 60%;
            .gc-submit {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100px;
            }
        }
        .gf-img {
            .ql-container {
                height: 500px;
            }
        }
        .gf-success {
            display: flex;
            flex-direction: column;
            align-items: center;
            .gs-icon {
                i {
                    font-size: 100px;
                    color: #19be6b;
                }
            }
            .gs-text {
                font-size: 18px;
                color: #000;
            }
            .gs-description {
                padding: 20px 0;
            }
        }
    }
    .gu-notice {
        .gn-common {
            padding: 10px;
            border: 1px solid #abdcff;
            background: #f0faff;
            .gc-title {
                display: flex;
                align-items: center;
                height: 40px;
                span {
                    font-size: 18px;
                }
            }
            .gc-content {
                .gc-item {
                    .gi-label {
                        height: 30px;
                        span {
                            font-size: 16px;
                        }
                    }
                    &:not(:first-child) {
                        margin-top: 10px;
                    }
                }
            }
        }
    }
}
</style>